import { ref } from 'vue'

// 主题列表定义
export const themeList = [
  { name: 'channing-cyan', path: '/themes/channing-cyan.css' },
  { name: 'cyanosis', path: '/themes/cyanosis.css' },
  { name: 'fancy', path: '/themes/fancy.css' },
  { name: 'Chinese-red', path: '/themes/Chinese-red.css' },
  { name: 'condensed-night-purple', path: '/themes/condensed-night-purple.css' },
]

// 当前主题
export const currentTheme = ref('channing-cyan')

// 主题切换处理函数
export const handleThemeChange = (value: string) => {
  const selectedTheme = themeList.find((t) => t.name === value)
  if (selectedTheme) {
    // 移除之前的主题
    const prevTheme = document.querySelector('link[data-theme]')
    if (prevTheme) {
      prevTheme.remove()
    }

    // 添加新主题
    const link = document.createElement('link')
    link.rel = 'stylesheet'
    link.href = selectedTheme.path
    link.setAttribute('data-theme', 'true')
    document.head.appendChild(link)
  }
}